<template>
  <a-card>
    <a-tabs @change="tabChange">
      <a-tab-pane :key="item.weid" :tab="item.name" v-for="item in brands"></a-tab-pane>
      
    </a-tabs>
    <a-tabs default-active-key="list" @change="parentTabChange" tab-position="left">
      <a-tab-pane key="list" tab="搜索页热词">
        <a-card>
          <div style="margin-bottom: 20px;">
            <a-button type="primary" slot="tabBarExtraContent" @click="add(null)">新增</a-button>
          </div>
          <a-table
            bordered
            :loading="loading"
            :columns="columns"
            :rowKey="(record) => record.id"
            :data-source="dataSource"
            :pagination="pagination"
            :scroll="{ x: true }"
            @change="handleTableChange"
          >
            <span slot="type" slot-scope="text, record">{{
              record.type == "link" ? "链接页面" : "关键词搜索商品"
            }}</span>
            <span slot="action" slot-scope="text, record">
              <a-icon type="arrow-up" class="sort" @click="move(record, 'up')" />
              <a-icon
                type="arrow-down"
                class="sort ml-10"
                @click="move(record, 'down')"
              />
              <a @click="add(record)" class="ml-10">编辑</a>
              <a
                @click="deleteService(record, '温馨提示', '确定删除该热词吗')"
                class="ml-10"
                >删除</a
              >
            </span>
          </a-table>
          <create
            v-if="showForm"
            :brandId="brandId"
            :showTitle="showTitle"
            :words="words"
            @close="close"
          />
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="set" tab="更多设置">
        <div class="switch">
          <span>是否开启图搜</span>
          <a-switch
            :loading="switchLoading"
            :checked="openStatus"
            checked-children="开"
            un-checked-children="关"
            @change="switchStatus"
          />
        </div>
        <p class="tip">*上述配置仅针对微商城分类页、商品列表页搜索组件生效</p>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
import { brands } from "../util/brand";
import create from "./create.vue";
import {
  getList,
  deleteWord,
  moveWord,
  queryStatus,
  updateStatus,
} from "@/api/micromall/operation";
const columns = [
  {
    title: "关键词",
    width: 200,
    align: "center",
    dataIndex: "keyword",
  },
  {
    title: "类型",
    align: "center",
    width: 200,
    dataIndex: "type",
    scopedSlots: { customRender: "type" },
  },
  {
    title: "操作",
    align: "center",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];
export default {
  data() {
    return {
      brands,
      columns,
      dataSource: [
        { id: 1, word: "21秋季新品", type: "2" },
        { id: 2, word: "21秋季新品", type: "1" },
        { id: 3, word: "连衣裙", type: "1" },
        { id: 4, word: "衣服", type: "1" },
      ],
      brandId: 2738574294,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40"],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total) => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === "prev") {
            return <a>上一页</a>;
          } else if (type === "next") {
            return <a>下一页</a>;
          }
          return originalElement;
        },
      },
      loading: false,
      showForm: false,
      words: null,
      showTitle: "新增",
      parentTabKey: "list",
      switchLoading: false,
      list: []
    };
  },
  components: {
    create,
  },
  computed:{
    openStatus(){
      const currentBrand = this.list.find( item => item.brandId == this.brandId)
      console.log(this.list,currentBrand)
      return currentBrand ? currentBrand.status == 1 : false
    }
  },
  watch: {
    brandId() {
      this.loadData();
    },
  },
  mounted() {
    this.loadData();
    this.getStatus();
  },
  methods: {
    async getStatus() {
      const res = await queryStatus();
      this.list =  res.data
      console.log(res);
    },
    async switchStatus(checked) {
      console.log(checked)
      this.switchLoading = true
      const { brandId,list } = this
      let status = checked ?  0 : 1
      const res = await updateStatus({ brandId, status })
      this.switchLoading = false
      if(res.code == 200){
        this.$message.success('修改成功')
        const index = list.findIndex(item => item.brandId == brandId)
        this.$set(list[index],'status',checked ?  1 : 0)
      }else{
        this.$message.error(res.message || res.msg || '接口错误')
      }
    },
    parentTabChange(key) {
      this.parentTabKey = key;
    },
    tabChange(brandId) {
      this.brandId = brandId;
      console.log(brandId);
    },
    handleTableChange(pagination) {
      this.pagination = pagination;
      this.loadData();
    },
    async loadData() {
      this.loading = true;
      const { brandId } = this;
      const re = await getList({ brandId });
      this.loading = false;
      if (re.code == 200) {
        this.dataSource = re.data;
      } else {
        this.$message.error(re.msg);
      }
    },
    add(words) {
      this.words = words;
      this.showForm = true;
      this.showTitle = words ? "编辑" : "新增";
    },
    close() {
      this.showForm = false;
      this.loadData();
    },
    deleteService(record, title, content) {
      this.$confirm({
        title: title || "确定删除吗?",
        content: content || "",
        cancelText: "暂不",
        onOk: (res) => {
          console.log(res);
          return new Promise((resolve, reject) => {
            deleteWord({ id: record.id })
              .then((res) => {
                console.log(res);
                if (res.code == 200) {
                  this.loadData();
                  this.$message.success("删除成功");
                  resolve();
                } else {
                  this.$message.success(res.msg);
                  reject();
                }
              })
              .catch((err) => {
                resolve();
                console.log(err);
              });
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    async move(record, moveType) {
      this.loading = true;
      const re = await moveWord({ id: record.id, move: moveType });
      this.loading = false;
      if (re.code == 200) {
        this.$message.success("移动成功");
        this.loadData();
      } else {
        this.$message.error(re.msg || "移动失败");
      }
    },
  },
};
</script>
<style scoped>
.ml-10 {
  margin-left: 10px;
}
.tip {
  color: #999;
  font-size: 14px;
  margin-top: 20px;
}
.switch{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
}

.sort {
  color: #1890ff;
}
</style>
